import React from "react";

import { Flex } from "antd-mobile";

import styles from "./index.module.css"

const titleList = [
  {title: '区域', type: 'area'},
  {title: '方式', type: 'rentType'},
  {title: '租金', type: 'price'},
  {title: '筛选', type: 'more'}
]

export default function FilterTitle({ titleSelectedStatus, clickFn }) {
  return (
    <Flex align="center" className={styles.root}>
      {
        titleList.map(item => {
          return (
            <Flex.Item className={[styles.title, titleSelectedStatus[item.type] ? styles.selected : ''].join(' ')} key={item.type} onClick={() => {clickFn(item.type)}}>
              <span>{item.title}</span>
              <i className="iconfont icon-arrow"/>
            </Flex.Item>
          )}
        )
      }
    </Flex>
  )
}